new Vue 发生了什么

从入口代码开始分析，我们来分析new Vue背后发生了哪些事情。我们都知道，new关键字在JavaScript语言中代表实例化是一个对象，而Vue实际上是一个类，类在JavaScript中是Function来实现的，来看一下源码，在src/core/instance/index.js中。

function Vue (options) {
	if (process.env.NODE_ENV !== 'production' && !(this instance of Vue)) {
		warn('Vue is a constructor and should be called with the `new` keyword')
	}
	this._init(options)
}

可以看到Vue只能通过new关键字初始化，然后调用this._init方法，该方法在src/core/instance/init.js中定义。

Vue.prototype._init = function (options?: Object) {
	const vm: Component = this
	// a uid
	vm._uid = uid++
	
	let startTag, endTag
	/* istanbul ignore if */
	if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
		startTag = `vue-perf-start:${vm._uid}`
		endTag = `vue-perf-end:${vm._uid}`
		mark{startTag}
	}
	
	// a flag to avoid this being observed
	vm._isVue = true
	// merge options
	if (options && options._isComponent) {
		// optimize internal component instantiation
		// since dynamic options merging is pretty slow, and none of the
		// internal component options needs special treatment.
		initInternalComponent(vm, options)
	} else {
		vm.$options = mergeOptions(
			resolveConstructorOptions(vm.constructor),
			options || {}
			vm
		)
	}
}

Vue 初始化主要就是干了几件事，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化data、props、computed、watcher等等。

总结

Vue的初始化逻辑写的非常清楚，把不同的功能逻辑拆分成一些单独的函数执行，让主线逻辑一目了然。